<template>
  <div class="message">
    <van-nav-bar fixed border title="消息通知" left-text="返回" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="loading" @refresh="onLoad" success-text="刷新成功">
      <!--    消息头部导航栏-->
      <van-grid clickable :column-num="4" :border="false">
        <van-grid-item text="@我的">
          <van-icon slot="icon" class="toutiao toutiao-wode1" @click="$router.push('/404')"></van-icon>
        </van-grid-item>
        <van-grid-item text="点赞">
          <van-icon slot="icon" class="toutiao toutiao-dianzan"></van-icon>

        </van-grid-item>
        <van-grid-item text="回复">
          <van-icon slot="icon" class="toutiao toutiao-speech-bubble" @click="$router.push('/404')"></van-icon>

        </van-grid-item>
        <van-grid-item text="粉丝">
          <van-icon slot="icon" class="toutiao toutiao-hezuo" @click="$router.push('/fans/my/0')"></van-icon>

        </van-grid-item>
      </van-grid>
      <!--    消息区域-->
      <div v-for="(val,i) in list" :key="i">
        <chat-cell :autor="val"></chat-cell>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import ChatCell from './components/chatcell'
import { mapState } from 'vuex'
export default {
  name: 'message',
  components: { ChatCell },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    onLoad () {
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  },
  computed: {
    ...mapState(['autorlist', 'user']),
    list () {
      if (this.user) {
        return this.autorlist.filter(val => val.name !== 'damo')
      }
      return []
    }
  }
}
</script>

<style scoped lang="less">
  .message {
    .van-pull-refresh
  {
    margin-top:100px;
    height: 1300px;
  }
  .vant-images {
    margin-right: 15px;
  }
  }
  // .van-grid {
  // }
</style>
